<template>
  <!-- 客户管理 -->
  <div class="app-page">
    <el-tabs
      v-model="activeTabName"
      type="card"
      @tab-click="handleClickTab"
    >
      <el-tab-pane label="正式客户" name="realCustomer">
        <real-csm-tab ref="realCustomer" :csm-lerel="csmLerel" :tree-data="treeData" :customer-type-map="customerTypeMap" :new-from-map="newFromMap" :csm-status-map="csmStatusMap" :csm-level-map="csmLevelMap" :csm-new-type-map="csmNewTypeMap" :acc-csmcard-card-status-map="accCsmcardCardStatusMap" />
      </el-tab-pane>
      <el-tab-pane label="注销客户" name="offCustomer">
        <off-csm-tab ref="offCsmTab" :csm-lerel="csmLerel" :tree-data="treeData" :customer-type-map="customerTypeMap" :new-from-map="newFromMap" :csm-status-map="csmStatusMap" :csm-level-map="csmLevelMap" :csm-new-type-map="csmNewTypeMap" :acc-csmcard-card-status-map="accCsmcardCardStatusMap" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import RealCsmTab from './components/RealCsmTab'
  import OffCsmTab from './components/OffCsmTab'
  import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'
  import { queryCsmLevelMap, queryMap } from '@/api'
  import getTreeData from '@/utils/jsonTree'
  import { mapGetters } from 'vuex'

  export default {
    name: 'customerManage',
    components: {
      RealCsmTab, OffCsmTab
    },
    data() {
      return {
        activeTabName: 'realCustomer',
        treeData: [],
        customerTypeMap: [],
        newFromMap: [],
        csmStatusMap: [],
        csmLevelMap: [],
        csmNewTypeMap: [],
        accCsmcardCardStatusMap: [],
        csmLerel: 0
      }
    },
    computed: {
      ...mapGetters([
        'orgList'
      ])
    },
    async created() {
      await Promise.all([this.getTreeData(), this.queryOptionsMap(), this.getCsmLevelMap()])
    },
    mounted() {
      this.$refs.offCsmTab.fetchData({ currentPage: 1, pageSize: 20 })
      this.$watch('activeTabName', (val, oldval) => {
        if (val === 'realCustomer') {
          this.$refs.realCustomer.fetchData({ currentPage: 1, pageSize: 20 })
        } else {
          this.$refs.offCsmTab.fetchData({ currentPage: 1, pageSize: 20 })
        }
      })
    },
    methods: {
      // 获取所属机构数据
      async getTreeData() {
        const data = this.orgList.map(item => ({
          label: item.name,
          ...item
        }))
        this.treeData = getTreeData(data)
      },
      _getQuery(obj) {
        const query = {}
        for (const key in obj) {
          if (obj.hasOwnProperty(key)) {
            if (obj[key] !== '') {
              query[key] = obj[key]
            }
          }
        }
        return query
      },
      // 查询枚举
      async queryOptionsMap() {
        const [res1, res2, res3, res4, res5] = await Promise.all([mergeAsyncFunc(queryMap, { enumName: 'CustomerType' }), mergeAsyncFunc(queryMap, { enumName: 'CustomerFromPlat' }), mergeAsyncFunc(queryMap, { enumName: 'CustomerStatus' }), mergeAsyncFunc(queryMap, { enumName: 'CustomerNewType' }), mergeAsyncFunc(queryMap, { enumName: 'AccCsmcardCardStatus' })])
        this.customerTypeMap = res1.data // 客户类型
        this.newFromMap = res2.data // 客户来源
        this.csmStatusMap = res3.data // 客户状态
        this.csmNewTypeMap = res4.data // 开户类型
        this.accCsmcardCardStatusMap = res5.data // 充值卡状态
        console.log(this.csmStatusMap, ' this.csmStatusMap')
      },
      // 查询客户等级枚举
      async getCsmLevelMap() {
        const res = await mergeAsyncFunc(queryCsmLevelMap)
        this.csmLevelMap = JSON.parse(res.data.customerQuality)
        this.csmLerel = Number(res.data.csmLerel)
      },
      handleClickTab(tab) {
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
